<template>
  <div>
    <el-date-picker
      v-model="val"
      align="right"
      type="datetime"
      :class="{'require':getRequire && isNull(), 'item':true}"
      size="small"
      placeholder="选择时间"
      :format="format"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptions"
      @change="change"
    />
    <el-tooltip v-if="errorSign" class="right" effect="dark" :content="message" placement="top">
      <div>
        <i class="el-icon-warning" style="color:red;line-height:32px;" />
      </div>
    </el-tooltip>
  </div>
</template>
<script>
import { toDate } from '@/utils/ik/conversion/date'
import { verify } from '@/utils/ik/verify/verify.js'
export default {
  name: 'IkFormDatetime',
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'change'
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    line: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return [
        ]
      }
    }
  },
  data() {
    return {
      val: '',
      errorSign: false,
      message: '',
      defaultVal: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '' && value !== undefined) {
          this.val = value
        } else {
          if (this.defaultValue.indexOf('Now') !== -1) {
            this.val = toDate(this.defaultValue, this.format)
          } else {
            this.val = this.defaultValue
          }
          this.$emit('change', this.val)
        }
        this.$emit('onFieldChange', this.line, this.code, oldValue, value)
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    change(value) {
      // 取值验证
      this.message = verify(value, this.rules)
      if (this.message !== null) {
        this.errorSign = true
      } else {
        this.errorSign = false
      }
      // 空值验证
      if (this.isNull() && this.require) {
        this.errorSign = true
        this.message = "必填项，不可为空"
      }
      // v-model实现触发方法
      this.$emit('onFieldChange', this.line, this.code, '', value, this.errorSign, this.message)
      this.$emit('change', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.value = this.defaultValue
    },
    clean() {
    }
  }
}
</script>
<style scoped>
::v-deep.require> .el-input__inner{
    border: red 1px solid;
}
.item.el-date-editor.el-input{width:calc(100% - 30px)}
</style>
<style lang="scss" >
.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}
.el-date-editor.el-input {
  width: 100%;
}
.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
